var map;
var currentStoreId;
var yelpIdTemplate ="yelpInfo";
var contentString = '<div id="content" style="height:500px;width:250px;"></div>';
var infowindow = new google.maps.InfoWindow({content: contentString});
var testMarker;
var REVIEW_FIELD ="reviewContainerField";

$(document).ready
(
		function()
		{
			var myLatlng = new google.maps.LatLng(42.4605917,  -83.1346478);
		    var myOptions = 
		    {
		      zoom:11,
		      center: myLatlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    }
	    map = new google.maps.Map(document.getElementById("map"), myOptions);
	   jQuery.getJSON( "getStores.php", onResult );
		}
);

    function onResult(result)
    {
      var s="Result<br>";
      
      for(var i=0;i< result.length;i++){
          
        //s += "Store: " + result[i].store + "Lat/Lng : " + result[i].lat + "<br>";
        
        var htmlDisplay = buildInfoWindow(result[i]);
        var latlng = new google.maps.LatLng(result[i].lat,result[i].lng);
        var marker = createMarker(latlng,result[i].name, result[i].storeId, htmlDisplay );
        buildListView(i, result[i], marker, htmlDisplay);
      }
    }

      

      function createMarker(latlng, windowTitle, storeId, html) 
      {
          var contentString = html;
          var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              title:windowTitle
          });
          
          google.maps.event.addListener(marker, 'click', function () {
              infowindow.setContent(contentString);
              infowindow.open(map, marker);
              handleInfoWindow(storeId);
          });

          return marker;
      }

      function handleInfoWindow(storeId)
      {
       //alert('send ' + storeId + " up to the cloud");
       var s = "Send " + storeId + " up to the cloud";
       var dynaId = REVIEW_FIELD + storeId;
       console.log("dynaId: " + dynaId);
       var reviewContainer = document.getElementById(dynaId);
       
       //reviewContainer.innerHTML ="test me";
       //console.log("dynaId: " + reviewContainer.source);
       reviewContainer.source ="review_frame.php?storeId=" + storeId;
       
       //currentStoreId =storeId;
      }

      function buildInfoWindow(obj)
      {
        var result="<div class='infoWindow'>";
        result += "<div class='headerContainer'>" + obj.name + "</div>";
        //var idField  = REVIEW_FIELD + obj.storeId;
        //result += "<div id='"+ idField + "' class='reviewContainer' >original value goes here";
        result += "<iframe class='reviewContainer' src='review_frame.html?storeId="+ obj.storeId +"' ";
        result += "height='97%' width='100%' frameBorder='0'></iframe>";
        result += "<div class='addressContainer'>" + obj.address + "<br>";
        result += obj.city + " " + obj.state + ", " + obj.zip + "<br>";
        if(obj.phone != null)
          result += "Phone: " + formatPhone(obj.phone) + "<br>";
         // result += "Phone: " + formatPhone(obj.phone) + "<br>";
        if(obj.email != null)
          result += "<a href='mailto:" + obj.email+ "'>" + obj.email + "</a>";
        result += "<b>Labels</b>: " + obj.labels + "<br>";
        result +="<div>";
        result +="</div>";
        return result;
      } 

      function onYelpResult(result)
      {
        //alert(result);
        var yelpId = "#" + yelpIdTemplate + currentStoreId;
        $(yelpId).html("Full response: " +result);  
        
      }

      function formatPhone(s)
      {
          
        if(s == null && s.length != 10 && s.length != 11 && s.length != 7){
          return "";
        }

        if(s.length == 7){
           return s.substr(0,3) + "-" + s.substr(4,4);
        }

        if(s.length == 10){
          return "(" + s.substr(0,3) + ") " + s.substr(3,3) + "-" + s.substr(6,4);
        }

        if(s.length == 11){
          return "(" + s.substr(1,3) + ") " + s.substr(4,3) + "-" + s.substr(7,4);
        }

         return "";
      }   

      function buildListView(idx, obj, marker, html)
      {
        testMarker=marker;
        var latLng =  new google.maps.LatLng( marker.getPosition())
        var idRef = "t_" + idx;
        var divTag = document.createElement("div");
        divTag.id = idRef;
        
        var s = "<p><a href='javascript:void(0);'><b>" + obj.name + "</b></a><br><span class='addressContainer'>" 
                       + obj.address + " " + obj.city + "<br>"
                       + obj.city + " " + obj.state + " " + obj.zip + "</span></p>"; 
        
       divTag.innerHTML = s;
       document.getElementById("listContainer").appendChild( divTag );
       google.maps.event.addDomListener
       (
    		   divTag, 'click', function () 
    		   {
		         infowindow.setContent(html);
		         infowindow.open(map, marker);
         
    		   }
       );
      } 
      
   